<template>
    <el-card class="table-header" :body-style="{ padding: '8px 8px 4px' }">
        <el-form
            ref="searchdata"
            :inline="true"
            :model="searchdata"
            label-width="100px"
            class="form-label-left"
            @submit.native.prevent
            @keyup.enter.native="onSearch"
        >
            <el-form-item :label="item.title" v-for="item in config" :key="item.code" :prop="searchdata[item.code]">
                <slot v-if="item.slot" :name="item.slot">slot</slot>
                <el-select
                    v-if="item.type === 'select'"
                    v-model="searchdata[item.code]"
                    :placeholder="item.placeholder && item.placeholder ? item.placeholder : '精确查询'"
                    :size="size"
                    clearable
                >
                    <el-option
                        v-for="option in item.options"
                        :key="option.value"
                        :value="option.value"
                        :label="option.label"
                    />
                </el-select>
                <el-select
                    v-if="item.code === 'isValid'"
                    v-model="searchdata[item.code]"
                    :placeholder="item.placeholder && item.placeholder ? item.placeholder : '精确查询'"
                    :size="size"
                    clearable
                >
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                </el-select>
                <el-date-picker
                    v-if="item.type === 'time' || item.type === 'datetimerange'"
                    v-model="range"
                    :size="size"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:00']"
                    @change="onTime"
                >
                    >
                </el-date-picker>
                <!--   :picker-options="pickerOptions"-->
                <el-date-picker
                    v-if="item.type === 'datetime'"
                    v-model="searchdata[item.code]"
                    type="datetime"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    style="float: left; width: 100%"
                    :size="size"
                />
                <el-input
                    v-if="item.type === 'input'"
                    v-model="searchdata[item.code]"
                    :style="item.width ? `width : ${item.width}px` : ''"
                    :placeholder="item.placeholder && item.placeholder ? item.placeholder : '模糊查询'"
                    :maxlength="item.maxlength ? item.maxlength : 20"
                    :size="size"
                />
            </el-form-item>
            <el-form-item class="btn-group">
                <el-button :size="btnSize" type="success" icon="el-icon-search" @click="onSearch">查询</el-button>
                <el-button :size="btnSize" type="warning" icon="el-icon-refresh" @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
/***
 * select 下拉框
 * input  普通input
 * date 时间
 */
import { confirm, getSessionItem } from '@/utils/utils'
export default {
    name: 'TableHead',
    props: {
        config: Array, // 渲染item模块的json
        searchdata: Object, // data 请求的data
        filterId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            size: 'mini',
            btnSize: 'mini',
            range: [],
            dateObj: {
                startTime: '',
                endTime: ''
            },
            pickerOptions: {
                disabledDate: (time) => {
                    let data = new Date(this.ruleForm.admissionDate)
                    let thatDay = data.getTime()
                    return time.getTime() < thatDay
                }
            }
        }
    },
    created() {
        // 记搜索条件
        // const params = getSessionItem(this.getFilter())
        // if (params) {
        //     this.$emit('update:searchdata', JSON.parse(params))
        // }
    },
    mounted() {
        this._copy = Object.assign({}, this.searchdata)
    },
    methods: {
        getFilter() {
            var str = this.$router.history.current.path
            let strIndex = str.lastIndexOf('/')
            return 'filter_' + str.substring(strIndex + 1)
        },
        // 查询
        onSearch() {
            sessionStorage.setItem(this.getFilter(), JSON.stringify(Object.assign(this.searchdata, { pageNum: 1 }))) // 放置filter到sessionStorage;
            this.$emit('update:searchdata', Object.assign(this.searchdata, { pageNum: 1 }))
            this.$emit('parentPageList')
        },
        // 清空
        resetForm() {
            this.range = []
            this.dateObj = {
                startTime: '',
                endTime: ''
            }
            if (this.range && this.range[0] && this.range[1]) {
                this.$emit('update:searchdata', Object.assign({}, this._copy, this.dateObj))
            } else {
                this.$emit('update:searchdata', Object.assign({}, this._copy))
            }
            sessionStorage.removeItem(this.getFilter())
            this.$emit('parentPageList', this.searchdata)
        },
        // 点击时间处理回显问题
        onTime() {
            if (this.range && this.range[0] && this.range[1]) {
                this.dateObj.startTime = this.range[0]
                this.dateObj.endTime = this.range[1]
                this.$emit('update:searchdata', Object.assign({}, this.searchdata, this.dateObj))
            } else {
                this.dateObj = {
                    startTime: '',
                    endTime: ''
                }
                this.$emit('update:searchdata', Object.assign({}, this.dateObj))
            }
        }
    }
}
</script>

<style lang="scss">
.table-header {
    margin: 12px;
    .el-form-item {
        margin-bottom: 4px;
        .el-form-item__label {
            font-size: 12px;
        }
    }
    .btn-group {
        margin-left: 100px;
    }
    .el-select,
    .el-input {
        width: 180px !important;
    }
}
</style>
